<template>
	<view class="page">
		<view class="Header" :style="{'height':bgHeight}">
			<image class="bgRedHeader"
				src="https://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/%E5%89%8D%E7%AB%AF%E5%9B%BE%E7%89%87/c92249e7b76300efa57f3c92efeb970.png"
				mode="aspectFill"></image>
		</view>
		<view class="bgBox">
			<image class="bgRed"
				src="https://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/%E5%89%8D%E7%AB%AF%E5%9B%BE%E7%89%87/c92249e7b76300efa57f3c92efeb970.png"
				mode="aspectFill"></image>
			<view class="main">
				<view class="carouselBox">
					<view class="titleBox">
						<view class="maofengTit">
							冒丰数字
						</view>
						<view class="bottomLine"></view>
						<view class="detailTit">
							冒丰是真蜜 唤醒记忆力
						</view>
					</view>

					<swiper class="swiper" circular :indicator-dots="indicatorDots" :current="current" :autoplay="true"
						@change="changeCurrent">
						<swiper-item v-for="(item,i) in swpier" :key="i" @click="swpierDetails(item)">
							<view class="swiper-item">
								<view class="swiperItemPicBox">
									<image class="picOut" src="@/static/swiperPic.png" mode="aspectFill"></image>
									<image class="picMain" :src="item.imgUrl" mode="aspectFill"></image>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="indicator">
						<view class="dot" :class="{'active':i==current}" v-for="(item,i) in swpier.length"></view>
					</view>
				</view>

				<!-- 				<image @click="tojiesao"
					src="https://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/%E5%89%8D%E7%AB%AF%E5%9B%BE%E7%89%87/%E8%AE%A4%E5%85%BB%E4%BB%8B%E7%BB%8D%403x.png"
					mode="aspectFill" style="width: 710rpx;height: 191rpx;"></image> -->
				<view class="cardBox1">
					<view class="cardRight">
						<view class="cardRightItem" @click="tojiesao">
							<view class="cardRightTit">
								<view class="tit1" style="color: #DB5A0A;">
									{{titleKey}}介绍
								</view>
								<view class="tit2">
									冒丰是真蜜 唤醒记忆力
								</view>
							</view>
							<image class="cardRightItemPic" src="@/static/mifen.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>


				<!-- 去认养 -->
				<view class="fosterBox1">
					<view class="titleBox1">
						<view class="title1">
							我要{{titleKey}}
						</view>
						<view class="allBtn1" @click="goFosterList(1)">
							<view class="allBtnText1">
								更多
							</view>
							<u-icon color="#333333" size="12" name="arrow-right"></u-icon>
						</view>
					</view>
					<view style="margin-bottom: 15rpx;margin-left: -20rpx;">
						<u-tabs :list="list1" @click="click" lineWidth="30" lineColor="#BB292D"></u-tabs>
					</view>
					<view class="fosterCardBox1" style="margin-top: 15rpx;" v-if="fosterList.length>0">
						<view class="fosterCardItem1" v-for="item in fosterList" @click="goFosterDetail(item)">
							<image class="fosterItemPic1" :src="item.url" mode="aspectFill"></image>
							<view class="fosterName1">
								<view class="" v-if="item.varietyName=='名山蜂箱'">敬请期待</view>
								<view class="" v-else>{{item.farmName}}</view>
								<view class="">{{item.varietyName}}</view>
							</view>
							<view class="price1">
								￥{{item.money}}
							</view>
						</view>
					</view>
					<view class="" v-else>
						<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</u-empty>
					</view>
				</view>


				<!-- 去认养 -->
				<view class="fosterBox" v-if="assistance.length>0">
					<view class="titleBox">
						<view class="title">
							认养帮扶
						</view>
						<view class="allBtn" @click="goFosterList(2)">
							<view class="allBtnText">
								更多
							</view>
							<u-icon color="#333333" size="12" name="arrow-right"></u-icon>
						</view>
					</view>

					<view class="fosterCardBox">
						<view class="fosterCardItem" v-for="item in assistance" @click="goFosterDetail(item)">
							<image class="fosterItemPic" :src="item.imgUrl" mode="aspectFill"></image>
							<view class="fosterName">
								{{item.name + item.number + '号'}}
							</view>
							<view class="price">
								￥{{item.money}}
							</view>
						</view>
					</view>
				</view>

				<!-- 甜蜜商城 -->
				<!-- 				<view class="fosterBox">
					<view class="titleBox">
						<view class="title">
							甜蜜商城
						</view>
						<view class="allBtn" @click="goshop()">
							<view class="allBtnText">
								更多
							</view>
							<u-icon color="#333333" size="12" name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
				<view class="recommendCard" v-for="item in productList">
					<view class="recommendCardLeft">
						<view class="title1">
							好蜜带回家
						</view>
						<view class="bottomLine1"></view>
						<view class="shopName">
							{{item.title}} ￥{{item.unitPrice}}/瓶
						</view>
						<view class="buyBtn" @click="goShopBuy(item)">
							立即购买
						</view>
					</view>
					<view class="picBox">
						<image class="recommendOut" src="@/static/index/picwai.png" mode="aspectFill"></image>
						<image class="recommendPic" :src="item.coverPictureId" mode="aspectFill"></image>
					</view>
				</view> -->
				<!-- 蜂言蜂语 -->
				<view class="fosterBox">
					<view class="titleBox">
						<view class="title">
							蜂言蜂语
						</view>
					</view>
				</view>
				<view class="cardBox">
					<view class="cardLeft" @click="goSpecial('首页专题1')">
						<view class="cardLeftTit">
							蜂言蜂语
						</view>
						<view class="cardLeftText">
							小蜜蜂的奇妙世界
						</view>
						<image class="cardLeftPic"
							src="https://maofengshuzinongye.oss-cn-chengdu.aliyuncs.com/%E5%89%8D%E7%AB%AF%E5%9B%BE%E7%89%87/ebe9f2ce1b002c30ca569cfaeeed48a.png"
							mode="aspectFill"></image>
					</view>
					<view class="cardRight">
						<view class="cardRightItem" @click="goSpecial('首页专题2',specialList[0])">
							<view class="cardRightTit">
								<view class="tit1">
									{{specialList[0].headline}}
								</view>
								<view class="tit2">
									入口更安全
								</view>
							</view>
							<image class="cardRightItemPic" :src="specialList[0].coverId" mode="aspectFill"></image>
						</view>
						<view class="cardRightItem" @click="goSpecial('首页专题3',specialList_2[0])">
							<view class="cardRightTit">
								<view class="tit1">
									{{specialList_2[0].headline}}
								</view>
								<view class="tit2">
									营养百花蜜
								</view>
							</view>
							<image class="cardRightItemPic" :src="specialList_2[0].coverId" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="" style="height: 100rpx;"></view>
			</view>

		</view>
	</view>


</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				current: 0,
				swpier: [],
				indicatorDots: false,
				autoplay: false,
				fosterList: [],
				productList: [],
				bgHeight: '122rpx',
				statusBarHeight: 0,
				specialList: [],
				specialList_2: [],
				assistance: [],
				list1: [{
					name: '推荐',
					id: ''
				}],
				varietyId: '',
				titleKey: uni.getStorageSync('titleKey')
			}
		},

		created() {
			this.cread1()
			this.getFosterList()
			this.getProductList()
			this.getWxBtnHeight()
			this.getSpecialList() //获取专题 id
			this.assistanceList()
			this.getTable()
		},

		methods: {
			async getTable() {
				let res = await this.$api.request('farmer/variety/dropDownList')
				let list = res.data
				list.forEach(item => {
					this.list1.push({
						name: item.varietyName,
						id: item.id
					})
				})
			},
			click(item) {
				console.log('item', item);
				this.varietyId = item.id
				this.getFosterList()
			},
			goshop() {
				this.$emit('shop', 2)
			},
			async tojiesao() {
				uni.navigateTo({
					url: '/pages/my/adoptionRules/adoptionRules'
				})
			},
			goSpecial(type, res) {
				let url
				switch (type) {
					case '首页专题1':
						url = '/pages/index/richText/newsList'
						break;
					case '首页专题2':
						url = '/pages/index/richText/richText?id=' + res.id + '&title=' + res.headline
						break;
					case '首页专题3':
						url = '/pages/index/richText/richText?id=' + res.id + '&title=' + res.headline
						break;
				}
				uni.navigateTo({
					url: url
				})

			},
			async getWxBtnHeight() {
				// 获取胶囊按钮位置信息
				const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
				console.log(menuButtonInfo)
				const top = menuButtonInfo.top * 2
				this.bgHeight = top + menuButtonInfo.height * 2 + 15 + 'rpx'
			},
			changeCurrent(e) {
				this.current = e.detail.current
			},
			// 跳转认养详情
			goFosterDetail(item) {
				uni.navigateTo({
					url: '/pages/index/adopt/adopt?id=' + item.farmId + '&varietyId=' + item.id
				})



			},
			goFosterList(e) {
				uni.navigateTo({
					url: '/pages/index/adopt/adoptAll?cont=' + e
				})
			},
			//跳转商品详情
			goShopBuy(item) {
				uni.navigateTo({
					url: '/pages/index/shopDate/shopDate?id=' + item.id
				})
			},
			swpierDetails(item) {
				if (item.skipUrl != null) {
					uni.navigateTo({
						url: item.skipUrl
					})
				}
			},
			async cread1() { //获取轮播图数据
				let res = await this.$api.request('manage/banner/clientList')
				this.swpier = res.data
			},
			// async getFosterList2() { 
			// 	let res = await this.$api.request('manage/app/variety/list','get',{varietyId: this.varietyId})
			// 	this.fosterList =res.data.list.slice(0, 3)
			// },
			async getFosterList() { //认养列表
				let res = await this.$api.request('manage/app/variety/farmList', 'get', {
					varietyId: this.varietyId,
					pageNum: 1,
					pageSize: 10
				})
				this.fosterList = res.data.list.slice(0, 3)
			},
			async assistanceList() { //认养帮扶列表
				let res = await this.$api.request('farmer/foster/list', 'get', {
					businessType: 2
				})
				this.assistance = res.data.list.slice(0, 2)
			},
			async getProductList() { //商品列表
				let res = await this.$api.request('manage/product/list')
				this.productList = res.data.list.slice(0, 2)
			},
			async getSpecialList() {
				let params = {
					pageSize: 10,
					pageNum: 1,
					type: 1, //放心吃 1  营养蜜2
				}
				let res = await this.$api.request('manage/information/client/list', 'get', params)
				this.specialList = res.data.list

				let params1 = {
					pageSize: 10,
					pageNum: 1,
					type: 2, //放心吃 1  营养蜜2
				}
				let res1 = await this.$api.request('manage/information/client/list', 'get', params1)
				this.specialList_2 = res1.data.list

			}

		}
	}
</script>
<style scoped lang="scss">
	.page {
		width: 100vw;
		height: calc(100vh - 100rpx);
		overflow: scroll-y;
		padding: 0 20rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.Header {
		position: fixed;
		top: 0;
		z-index: 9000;
		width: 775rpx;
		overflow: hidden;
		left: -20rpx;

		.bgRedHeader {
			width: 775rpx;
			height: 372rpx;
		}
	}

	.bgBox {
		position: relative;

		.bgRed {
			position: absolute;
			top: 0;
			width: 755rpx;
			height: 372rpx;
			left: -20rpx;
		}

		.main {
			position: absolute;
			top: 175rpx;
		}

		.carouselBox {
			margin-bottom: 17rpx;
			width: 710rpx;
			padding-bottom: 17rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			box-shadow: 0rpx 7rpx 8rpx 5rpx rgba(153, 153, 153, 0.3);
			border-radius: 20rpx;

			.swiper {
				width: 587rpx;
				height: 520rpx;
				margin: 0 auto 25rpx;

				.swiper-item {
					.swiperItemPicBox {
						width: 587rpx;
						height: 520rpx;
						position: relative;

						.picOut {
							position: absolute;
							width: 587rpx;
							height: 520rpx;
							z-index: 500;
						}

						.picMain {
							position: absolute;
							width: 586rpx;
							height: 520rpx;
							z-index: 400;
						}
					}

				}
			}

			.titleBox {
				padding: 40rpx 0rpx 44rpx 0rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #BB292D;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.englistTit {
					font-size: 36rpx;
					margin-bottom: 20rpx;
				}

				.maofengTit {
					font-size: 36rpx;

				}

				.bottomLine {
					width: 140rpx;
					height: 4rpx;
					background: #BB292D;
					margin-top: 18rpx;
				}

				.detailTit {
					margin-top: 20rpx;
					font-size: 26rpx;
				}

			}
		}

		.cardBox {
			display: flex;
			width: 700rpx;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.cardLeft {
				width: 340rpx;
				height: 337rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 7rpx 8rpx 0rpx rgba(153, 153, 153, 0.3);
				border-radius: 10rpx;
				padding-top: 37rpx;
				box-sizing: border-box;

				.cardLeftTit {

					margin-bottom: 16rpx;
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #DB5A0A;
					margin-left: 41rpx;
				}

				.cardLeftText {
					margin-left: 41rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #BBBBBA;
					margin-bottom: 6rpx;
				}

				.cardLeftPic {
					width: 100%;
					height: 198rpx;
				}
			}

			.cardRight {
				display: flex;
				flex-direction: column;

				.cardRightItem {
					justify-content: space-between;
					padding: 33rpx 35rpx 34rpx 25rpx;
					box-sizing: border-box;
					display: flex;
					width: 340rpx;
					height: 162rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 7rpx 8rpx 0rpx rgba(153, 153, 153, 0.3);
					border-radius: 10rpx;
					overflow: hidden;

					&:nth-child(1) {
						margin-bottom: 14rpx;
					}

					.cardRightTit {
						.tit1 {
							font-size: 34rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #333333;
							margin-top: 10rpx;
							margin-bottom: 6rpx;
						}

						.tit2 {
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #BBBBBA;
						}
					}

					.cardRightItemPic {
						width: 95rpx;
						height: 95rpx;
						border-radius: 50%;
					}
				}
			}
		}

		.fosterBox {
			padding: 13rpx 18rpx 0rpx;
			margin-bottom: 46rpx;

			.titleBox {
				display: flex;
				justify-content: space-between;
				margin-bottom: 45rpx;

				.title {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;


				}

				.allBtn {
					display: flex;
					align-items: center;

					.allBtnText {
						color: #333333;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						margin-right: 10rpx;
					}
				}
			}


			.fosterCardBox {
				display: flex;
				justify-content: space-between;
				width: 100%;

				.fosterCardItem {
					width: calc(100% / 2 - 28rpx);
					background: #FFFFFF;
					box-shadow: 0rpx 7rpx 8rpx 0rpx rgba(153, 153, 153, 0.3);
					border-radius: 20rpx;
					padding: 22rpx 14rpx 28rpx 14rpx;
					box-sizing: border-box;

					.fosterItemPic {
						width: 100%;
						height: 294rpx;
						border-radius: 10rpx;
						margin-bottom: 13rpx;
					}

					.fosterName {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-bottom: 21rpx;
					}

					.price {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #DC1010;
					}
				}
			}
		}

		.recommendCard {
			justify-content: space-between;
			margin-bottom: 23rpx;
			display: flex;
			width: 710rpx;
			background: #fff;
			box-sizing: border-box;
			box-shadow: 0rpx 7rpx 8rpx 5rpx rgba(153, 153, 153, 0.3);
			border-radius: 20rpx;
			padding: 30rpx 43rpx 21rpx 27rpx;
			margin-bottom: 36rpx;

			&:last-child {
				margin-bottom: 150rpx;
			}

			.recommendCardLeft {
				width: 380rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #BB292D;
				display: flex;
				flex-direction: column;
				align-items: center;

				.title1 {
					font-size: 36rpx;
					margin-bottom: 7rpx;
				}

				.bottomLine1 {
					width: 186rpx;
					height: 4rpx;
					background: #BB292D;
					border-radius: 2rpx;
				}

				.shopName {
					margin-top: 10rpx;
					font-size: 30rpx;
					margin-bottom: 27rpx;
				}

				.buyBtn {
					width: 173rpx;
					height: 56rpx;
					background: #FF0000;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					line-height: 56rpx;
					border-radius: 28rpx;
				}
			}

			.picBox {
				width: 160rpx;
				height: 200rpx;
				position: relative;

				.recommendPic {
					position: absolute;
					width: 159rpx;
					height: 195rpx;
					z-index: 500;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);


				}

				.recommendOut {
					position: absolute;
					z-index: 600;
					width: 160rpx;
					height: 200rpx;

				}
			}
		}

	}


	.indicator {
		width: 100%;
		justify-content: center;
		display: flex;

		.dot {
			width: 10rpx;
			height: 6rpx;
			background: #BB292D;
			border-radius: 3rpx;
			margin-right: 9rpx;

			&.active {
				animation: change 0.5s;
				animation-fill-mode: forwards;
				height: 6rpx;
				background: #BB292D;
				border-radius: 3rpx;
			}
		}

		@keyframes change {
			0% {
				width: 13rpx;
			}

			10% {
				width: 16rpx;
			}

			20% {
				width: 19rpx;
			}

			30% {
				width: 22rpx;
			}

			40% {
				width: 25rpx;
			}

			50% {
				width: 28rpx;
			}

			60% {
				width: 31rpx;
			}

			70% {
				width: 34rpx;
			}

			80% {
				width: 37rpx;
			}

			90% {
				width: 39rpx;
			}

			100% {
				width: 41rpx;
			}
		}




	}



	.cardBox1 {
		display: flex;
		width: 100%;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.cardRight {
			display: flex;
			flex-direction: column;

			.cardRightItem {
				justify-content: space-between;
				padding: 33rpx 35rpx 34rpx 25rpx;
				box-sizing: border-box;
				display: flex;
				width: 710rpx;
				height: 162rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 7rpx 8rpx 0rpx rgba(153, 153, 153, 0.3);
				border-radius: 10rpx;
				overflow: hidden;

				&:nth-child(1) {
					margin-bottom: 14rpx;
				}

				.cardRightTit {
					.tit1 {
						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-top: 10rpx;
						margin-bottom: 6rpx;
					}

					.tit2 {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #BBBBBA;
					}
				}

				.cardRightItemPic {
					width: 95rpx;
					height: 95rpx;
				}
			}
		}
	}


	.fosterBox1 {
		padding: 13rpx 18rpx 0rpx;
		margin-bottom: 46rpx;

		.titleBox1 {
			display: flex;
			justify-content: space-between;
			margin-bottom: 25rpx;
			width: 700rpx;

			.title1 {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;


			}

			.allBtn1 {
				display: flex;
				align-items: center;

				.allBtnText1 {
					color: #333333;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					margin-right: 10rpx;
				}
			}
		}


		.fosterCardBox1 {
			display: flex;

			width: 100%;

			.fosterCardItem1 {
				width: 228rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 7rpx 8rpx 0rpx rgba(153, 153, 153, 0.3);
				border-radius: 20rpx;
				padding: 22rpx 14rpx 28rpx 14rpx;
				box-sizing: border-box;
				margin-right: 10rpx;

				.fosterItemPic1 {
					width: 100%;
					height: 228rpx;
					border-radius: 10rpx;
					margin-bottom: 10rpx;
				}

				.fosterName1 {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-bottom: 15rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.price1 {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #DC1010;
				}
			}
		}
	}
</style>